<template>
  <div class="captureImg">
    <div class="left">
      <div class="time">
        <div class="title">选择时间</div>
        <el-date-picker
          v-model="selectionTime"
          type="date"
          placeholder="请选择时间"
          :size="size"
        />
      </div>
      <ul>
        <el-scrollbar style="height: 600px">
          <li
            v-for="(item, index) in imgList"
            :key="index"
            @click="onToggle(item, index)"
            :class="{ active: activeIndex === index }"
          >
            <div class="view">
              <img src="@/assets/demo1.png" alt="" />
            </div>
            <div class="content">
              <div class="name">{{ item.name }}</div>
              <div class="time">{{ item.time }}</div>
              <div class="duration">{{ item.duration }}</div>
            </div>
          </li>
        </el-scrollbar>
      </ul>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2"
      height="788"
      viewBox="0 0 2 788"
      fill="none"
    >
      <path
        d="M1 1L1.00003 787"
        stroke="url(#paint0_linear_60_3172)"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="2 9"
      />
      <defs>
        <linearGradient
          id="paint0_linear_60_3172"
          x1="0.5"
          y1="1"
          x2="0.500034"
          y2="787"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#737373" stop-opacity="0.7" />
          <stop offset="0.519873" stop-color="#D9D9D9" />
          <stop offset="1" stop-color="#737373" stop-opacity="0" />
        </linearGradient>
      </defs>
    </svg>
    <div class="right">
      <div class="content">
        <div class="name">经皮静脉内滤网置入术</div>
        <div class="time">2024-07-02 12:17</div>
      </div>
      <!-- 视频播放器 -->
      <!-- <video
        ref="videoPlayer"
        poster="@/assets/demo3.png"
        style="height: 400px"
        @loadedmetadata="onLoadedMetadata"
        @timeupdate="updateProgress"
        class="video-js vjs-big-play-centered"
        data-setup="{}"
        controls
      >
        <source
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          type="video/mp4"
        />
      </video> -->
      <video
        ref="videoPlayer"
        poster="@/assets/demo3.png"
        style="height: 500px; width: 100%"
        @loadedmetadata="onLoadedMetadata"
        @timeupdate="updateProgress"
        controls
        controlslist="nodownload nofullscreen noremoteplayback noplaybackrate"
        disablePictureInPicture="true"
      >
        <source
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          type="video/mp4"
        />
      </video>

      <div class="control">
        <!-- 进度 -->

        <input
          type="range"
          :style="sliderStyle"
          min="0"
          :max="duration"
          v-model="currentTime"
          class="custom-range"
          @input="seek"
        />
        <!-- <span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span> -->

        <!-- 播放 -->
        <div class="control_btn">
          <svg-icon
            name="left"
            style="width: 20px; height: 20px;margin-right:20px"
            @click="onPrevious"
          />
          <div class="btn" @click="togglePlay">
            <img
              style="width: 60px; object-fit: contain; height: 128px"
              v-if="!isPlaying"
              src="@/assets/pause.png"
              alt=""
            />
            <img
              style="width: 60px; object-fit: contain; height: 128px"
              v-else
              src="@/assets/play.png"
              alt=""
            />
          </div>

          <svg-icon
            name="right"
            style="width: 20px; height: 20px; margin:0 20px"
          />

          <div
            class="progress-bar-container"
            @wheel="handleWheel"
            :style="{
              height: '51px',
              width: '100px',
              backgroundColor: '#363636',
            }"
          >
            <div
              class="progress-bar"
              :style="{
                width: `${volume * 100 + '%'}`,
                height: '100%',
                backgroundColor: '#fff',
              }"
            ></div>

            <svg-icon
              v-if="!volume == 0"
              name="volume"
              style="width: 20px; height: 20px; margin-right: 13px"
              class="controlicon"
            />

            <svg-icon
              v-else
              name="sound0"
              style="width: 20px; height: 20px; margin-right: 13px"
              class="controlicon"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
const posterSrc = ref("@/assets/demo2.png"); // 替换成你的视频封面图片
import videojs from "video.js";
import "@/styles/video.css";
import svgIcon from "@/components/Svg/svg-icon.vue";
const videoPlayer = ref(null);
const video = ref(null); // video 标签的引用
const isPlaying = ref(false); // 播放状态
const currentTime = ref(0); // 当前播放时间
const duration = ref(0); // 视频总时长
const volume = ref(1); // 音量值，范围 0 到 1
const selectionTime = ref(""); //时间选择

// 获取视频时长
const onLoadedMetadata = () => {
  if (videoPlayer.value) {
    duration.value = videoPlayer.value.duration;
  }
};

// 播放
const togglePlay = () => {
  if (videoPlayer.value) {
    if (videoPlayer.value.paused || videoPlayer.value.ended) {
      videoPlayer.value.play();
      isPlaying.value = true;
    } else {
      videoPlayer.value.pause();
      isPlaying.value = false;
    }
  }
};






// 更新进度条
const updateProgress = () => {
  if (videoPlayer.value) {
    currentTime.value = videoPlayer.value.currentTime;
  }
};

const seekVideo = (event) => {
  const progressBar = event.target;
  const seekTime = (event.offsetX / progressBar.offsetWidth) * duration.value;
  video.value.currentTime = seekTime;
};

// 跳转到进度条指定时间
const seek = () => {
  if (videoPlayer.value) {
    videoPlayer.value.currentTime = currentTime.value;
  }
};

// 格式化时间为分钟:秒的形式
const formatTime = (time) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
};

// 处理鼠标滚轮事件，更新进度
const handleWheel = (event) => {
  if (event.deltaY < 0) {
    volume.value = Math.min(volume.value + 0.05, 1);
    console.log(volume.value * 10);
  } else {
    volume.value = Math.max(volume.value - 0.05, 0);
  }
  videoPlayer.value.volume = volume.value;
};

// 监听播放状态变化
watch(isPlaying, (newVal) => {
  if (videoPlayer.value) {
    if (newVal) {
      videoPlayer.value.play();
    } else {
      videoPlayer.value.pause();
    }
  }
});
const sliderStyle = computed(() => {
  console.log((currentTime.value / duration.value) * 100);
  console.log(currentTime.value, duration.value);
  console.log(duration.value);
  const percentage = (currentTime.value / duration.value) * 100;
  return {
    background: `linear-gradient(to right, #43d5c7 ${percentage}%, #fff ${percentage}%)`,
  };
});
onMounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.load();
  }
 
});

const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];

const imgList = ref([
  {
    id: 1,
    name: "经皮静脉内滤网置入术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 2,
    name: "胆囊切除术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 3,
    name: "经皮心内膜心肌活检术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 3,
    name: "经皮动脉支架置入术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 4,
    name: "经皮冠状动脉内溶栓术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 5,
    name: "外伤后清创缝合手术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 6,
    name: "经皮动脉激光成形+球囊扩张术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  {
    id: 7,
    name: "临时起搏器植入术",
    time: "2024-07-02 12:17",
    duration: "01:30",
  },
  { id: 8, name: "先心性介入治疗", time: "2024-07-02 12:17", duration: "" },
]);

const activeIndex = ref(0);
const itemMsg = ref();
const indexMsg = ref();
const onToggle = (item, index) => {
  activeIndex.value = index;
};

// const onPrevious = () => {
//   activeIndex.value++;
//   console.log(indexMsg.value);
// };

onMounted(() => {});
</script>
<style scoped lang="scss">
.captureImg {
  padding: 20px;
  display: flex;
  .left {
    width: 28%;
    margin-right: 50px;
    .time {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title {
        color: #fff;
        /* Title/Large */
        font-family: "Microsoft YaHei";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        width: 100px;
        line-height: 26px; /* 144.444% */
      }
    }
    ul {
      li {
        display: flex;
        height: 120px;
        align-items: center;
        padding: 0px 16px;
        img {
          width: 160px;
          height: 90px;
          flex-shrink: 0;
          margin-right: 10px;
          border-radius: 8px;
        }
        .content {
          height: 90px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            color: #fff;
            /* Title/Large */
            font-family: "Microsoft YaHei";
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
          }
          .time {
            color: #fff;
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
          }
          .duration {
            color: #fff;
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
          }
        }
      }
      .active {
        border-radius: 10px;
        background: linear-gradient(
          90deg,
          rgba(70, 255, 211, 0.2) 0%,
          rgba(0, 255, 240, 0) 100%
        );
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 10px;
    position: relative;
    .content {
      display: flex;
      align-items: center;
      margin: 10px 0;

      .name {
        color: #fff;
        /* Title/Large */
        font-family: "Microsoft YaHei";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px; /* 144.444% */
        margin-right: 10px;
      }
      .time {
        color: #fff;
        /* Body/Medium */
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }
    }
    .video-js {
      height: 587px;
      width: 100%;
    }

    .control {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      .control_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progress-bar-container {
          position: relative;
          transform: rotate(-90deg);
        }
        .controlicon {
          position: absolute;
          top: 15px;
          z-index: 1;
          left: 5px;
        }

        .btn {
          position: relative;
          cursor: pointer;
          .btnbox {
            fill: linear-gradient(
              319deg,
              rgba(61, 167, 141, 0.1) 15.44%,
              #39d0ac 84.72%
            );
            stroke-width: 2px;
            stroke: rgba(0, 0, 0, 0.42);
            box-shadow: 0px 0px 4.3px 5px rgba(158, 158, 158, 0.12) inset;
            filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.38));
          }
          .btnbg {
            // position: absolute;
            // z-index: 2;
          }
          .initiate {
            position: absolute;
            left: 15px;
            top: 14px;
          }
        }
      }
    }
  }
  :deep(.el-select--large .el-select__wrapper) {
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.19);
  }
  :deep(.el-progress-bar__outer) {
  }

  .progress-bar-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
  }
  .progress-bar {
    transition: width 0.3s ease-in-out;
  }

  .slider-container {
    width: 100%; /* 容器宽度 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
  }

  /* 容器 */
  .slider-container {
    width: 100%; /* 容器宽度 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
  }

  /* 自定义滑块 */
  .custom-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%; /* 宽度 100% */
    height: 10px; /* 轨道高度 */
    display: none;
    border-radius: 5px; /* 轨道圆角 */
    outline: none; /* 去掉焦点框 */
    transition: background 0.5s ease; /* 平滑过渡 */
    margin: 10px 0;
  }

  /* 滑块的样式 */
  .custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #43d5c7; /* 滑块颜色 */
    cursor: pointer;
    margin-top: -1px;
    margin-left: 0px;
  }

  .custom-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
  }
  :deep(.el-input__wrapper) {
    background: none;
    border: none;
  }

  :deep(.el-input__inner) {
    border: none !important; /* 去掉默认边框 */
  }
  :deep(.el-input__inner::placeholder) {
    color: #fff;
  }
  .custom-range:focus {
    outline: none; /* 去掉聚焦时的边框 */
  }
  video::-webkit-media-controls-play-button {
    display: none;
  }

  video::-webkit-media-controls-mute-button {
    display: none;
  }
  video::-webkit-media-controls-fullscreen-button {
    display: none;
  }
  video::-webkit-media-controls-volume-control-container {
    display: none;
  }

  video::-internal-media-controls-overflow-button {
    display: none !important;
  }
}
</style>
